import React, {useState} from 'react'
import {Tag} from "antd-mobile";


const Index = ({dataSources}) => {

    const initState = {};
    dataSources.forEach((item, inx) => {
        initState[item.id] = item.selected || false
    });
    const [listSelected, setListSelected] = useState(initState);
    return (
        <div>
            {
                dataSources.map((item) => {
                    return (
                        <Tag key={item.id} style={{marginLeft: '6px'}} onChange={(selected) => {
                            const newListSelected = {};
                            for (let val of dataSources) {
                                newListSelected[val.id] = (val.id === item.id ? selected : !selected)
                            }
                            setListSelected(newListSelected);
                        }} selected={listSelected[item.id]}>{item.title}</Tag>
                    );
                })
            }
        </div>
    );
};

export default Index
